<template>
  <div class="retailList">
    <div class="type-change">
      <div class="item" style="margin-right:100px">
        <div :class="{'number':true,'number_':type==1}">本月(23)</div>
        <div :class="{'line':true,'line_':type==1}"></div>
      </div>
      <div class="item">
        <div :class="{'number':true,'number_':type==2}">总数(32)</div>
        <div :class="{'line':true,'line_':type==2}"></div>
      </div>
    </div>
    <div class="people-list">
      <div class="item">
        <div class="left">
          <img />
          <div class="text-main">
            <div class="overflow_">小熊的店...</div>
            <div>开店时间:19年02月21日</div>
          </div>
        </div>
        <div class="right">
          <div>
            本月:
            <span>222</span>艺店
          </div>
          <div>总数:12234艺店</div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <img />
          <div class="text-main">
            <div class="overflow_">小熊的店...</div>
            <div>开店时间:19年02月21日</div>
          </div>
        </div>
        <div class="right">
          <div>
            本月:
            <span>222</span>艺店
          </div>
          <div>总数:12234艺店</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  name: "Statistics",
  data() {
    return {
      type: 1, //1本月，2总数
    };
  },
  mounted() {
    // document.body.addEventListener("touchmove", () => {
    //   if (this.checkType == 0 || this.checkType == 5) {
    //     return;
    //   }
    //   var element = $("#statis-list");
    //   if (!element[0]) {
    //     return;
    //   }
    //   var win = $(window);
    //   if (
    //     element.offset().top + element.height() <=
    //     win.height() + win.scrollTop()
    //   ) {
    //     if (this.checkType == 1) {
    //       this.getnuclearList();
    //       console.log(1);
    //     }
    //     if (this.checkType == 2) {
    //       this.getstoreList();
    //       console.log(2);
    //     }
    //   }
    // });
    var that = this;
    window.onscroll = function () {
      //scrollTop就是触发滚轮事件时滚轮的高度
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // console.log("滚动距离" + scrollTop);
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // console.log("可视高度" + windowHeight);
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // console.log("总高度" + scrollHeight);
      //判断滚动条是否到底部
      if (scrollTop + windowHeight == scrollHeight) {
        //加载数据
        if (that.checkType == 1) {
          that.getnuclearList();
        }
        if (that.checkType == 2) {
          that.getstoreList();
        }
        // addData();
      }
    };
  },
  methods: {
    //初始化
    initialize() {
      this.showDom = false;
      this.page = 1;
      this.limit = 15;
      this.isSending = false;
      this.isGetMore = true;
      this.nuclearList = []; //裂变列表
      this.storeList = []; //店铺列表
      this.goodsList = []; //商品排行列表
      this.refundList = []; //退款商品列表
    },
    //裂变排行榜
    getnuclearList() {
      var that = this;
      if (this.isSending || !this.isGetMore) {
        return;
      }
      this.isSending = true;
      Indicator.open();
      this.$axios
        .get("/mall/v1/statistics/inviteData", {
          params: {
            page: this.page,
            limit: this.limit,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + this.token,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            Indicator.close();
            this.showDom = true;
            that.page++;
            that.nuclearList = that.nuclearList.concat(res.data.data);
            if (res.data.data.length < this.limit) {
              this.isGetMore = false;
            }
            this.isSending = false;
          } else {
            Toast(res.data.msg);
          }
        });
    },
    //艺店排行榜
    getstoreList() {
      var that = this;
      if (this.isSending || !this.isGetMore) {
        return;
      }
      this.isSending = true;
      Indicator.open();
      this.$axios
        .get("/mall/v1/statistics/storeMonthData", {
          params: {
            type: this.storeType,
            month: this.monChange,
            page: this.page,
            limit: this.limit,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + this.token,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.showDom = true;
            Indicator.close();
            that.page++;
            that.storeList = that.storeList.concat(res.data.data);
            if (res.data.data.length < this.limit) {
              this.isGetMore = false;
            }
            this.isSending = false;
          } else {
            Toast(res.data.msg);
          }
        });
    },
    toType(index) {
      if (index == 3 || index == 4 || index == 5) {
        Toast({
          message: "正在开发中，敬请期待",
          duration: 1000,
        });
        return;
      }
      if (this.checkType == index) {
        this.checkType = index;
        return;
      }
      this.checkType = index;
      // console.log(this.checkType);
      var length = $("#topS").scrollLeft();
      if (index == 3 && length == 0) {
        $("#topS").animate({ scrollLeft: $("#topS")[0].scrollWidth }, 500);
      }
      if (index == 2 && length > 0) {
        $("#topS").animate({ scrollLeft: 0 }, 500);
      }
      if (this.checkType == 0) {
        this.getStatic();
      }
      if (this.checkType == 1) {
        this.initialize();
        this.getnuclearList();
      }
      if (this.checkType == 2) {
        this.initialize();
        this.getstoreList();
      }
    },
    //切换上月和本月
    changeMonth() {
      this.monChange = this.monChange == 1 ? 2 : 1;
      if (this.checkType == 2) {
        this.initialize();
        this.getstoreList();
      }
    },
    //周报时间类型
    toTime(index) {
      this.checkTime = index;
    },
    //艺店月排行类型
    toStoreType(index) {
      this.storeType = index;
      this.initialize();
      this.getstoreList();
    },
    //商品排行类型
    toGoodsType(index) {
      this.goodsType = index;
    },
    getStatic() {
      let that = this;
      //   Indicator.open();
      that.$axios
        .get("/mall/v1/statistics/weekData", {
          //   params: {
          //     time: that.time,
          //   },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + this.token,
          },
        })
        .then(
          (res) => {
            if (res.data.code == 200) {
              //   Indicator.close();
              var res = res.data;
              that.showDom = true;
              if (res.data !== "") {
                that.show = true;
              } else {
                that.show = false;
              }
              that.info = res.data;
              //   setTimeout(function () {
              //     Indicator.close();
              //   }, 1000);
            } else if (res.data.code == 10000) {
              that.$router.push({ path: "/login" });
            } else {
              Toast(res.data.msg);
            }
          },
          (res) => {
            console.log("error");
          }
        );
    },
  },
  created() {
    document.title = this.$route.query.title;
    if (localStorage.token) {
      this.token = localStorage.getItem("token");
    } else {
      this.$router.push({ path: "/login" });
      return false;
    }
    // if (this.$route.query.time) {
    //   this.time = this.$route.query.time;
    // } else {
    //   this.time = 0;
    // }
    // this.getStatic();
  },
};
</script>
<style lang="less">
.retailList {
  min-height: 100vh;
  width: 100%;
  background: rgba(255, 255, 255, 1);
  padding-top: 100px;
  box-sizing: border-box;
  position: relative;
  .overflow_ {
    text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
    white-space: nowrap; /*让文字不换行*/
    overflow: hidden; /*超出要隐藏*/
  }
  .type-change {
    width: 100%;
    height: 100px;
    background: #ffffff;
    border-bottom: solid 2px #f2f2f2;
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    .item {
      height: 100%;
      padding-top: 24px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-direction: column;
      .number {
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #9b9b9b;
        line-height: 44px;
      }
      .number_ {
        color: #333334 !important;
      }
      .line {
        width: 112px;
        height: 10px;
        background: white;
        border-radius: 5px;
        margin-top: 20px;
      }
      .line_ {
        background: #dd0842 !important;
      }
    }
  }
  .people-list {
    margin: 48px 26px 0 26px;
    .item {
      padding: 30px 28px 30px 20px;
      box-sizing: border-box;
      border-radius: 12px;
      border: 2px solid #f2f2f2;
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        > img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .text-main {
          > div {
            &:nth-child(1) {
              font-size: 28px;
              font-family: PingFang-SC-Medium, PingFang-SC;
              font-weight: 500;
              color: #333334;
              line-height: 40px;
              width: 200px;
            }
            &:nth-child(2) {
              font-size: 24px;
              font-family: PingFang-SC-Medium, PingFang-SC;
              font-weight: 500;
              color: #9b9b9b;
              line-height: 34px;
            }
          }
        }
      }
      .right {
        > div {
          &:nth-child(1) {
            font-size: 28px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333334;
            line-height: 40px;
            > span {
              color: #dd0842 !important;
            }
          }
          &:nth-child(2) {
            font-size: 28px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333334;
            line-height: 40px;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>